<template>
  <Dialoger v-model="isShow" :dialogCls="'d-paner-lg'" title="文件内容">
    <template v-slot:body>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-el">
            <textarea :value="format(state.content)" class="d-form-textarea" rows="24"></textarea>
          </div>
        </div>
      </div>
    </template>
  </Dialoger>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger } from '@daelui/vdog/dist/components'

export default {
  components: {
    PanerForm,
    Dialoger
  },

  data () {
    return {
      isShow: false, // 窗口是否显示
      isEdit: false, // 是否是编辑模式,
      // 编辑信息
      state: {
        content: ''
      }
    }
  },

  methods: {
    /**
     * @function 显示与隐藏
    */
    show (data) {
      this.isShow = !!data
      data = data || {}
      this.state = data
    },

    /**
     * @function 格式化内容
    */
    format (content) {
      if (content === null) { // null
        content = 'null'
      } else if (content && typeof content === 'object') { // 对象
        content = JSON.stringify(content, null, '  ')
      }

      return content
    }
  }
}
</script>

<style lang="less" scoped>
.d-row {
  width: 100%;
  .d-form-group:last-child {
    margin-bottom: 0;
  }
}
.d-form-label {
  width: 90px;
}
// .d-form-textarea {
//   min-height: 320px;
// }
</style>
